<!--  frame 订单详情 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>订单详情</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/order/order-detail/order-detail2.wxss */

	/* 头部 */



	.header1 {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  height: 1.50rem;
	  background: linear-gradient(0deg, rgba(253, 27, 66, 1) 0%, rgba(255, 80, 45, 1) 100%);
	  padding-left: .30rem;
	}

	.hd_t {
	  font-size: .32rem;
	  color: #fff;
	  font-weight:800;
	  margin-bottom: .10rem;
	}

	.hd_b {
	  font-size: .28rem;
	  color: #fff;
	}

	/* 内容区 */

	.wrap {
	  margin-bottom: 1.20rem;
	}

	.mr_r_40 {
	  margin-right: .40rem;
	}

	.mr_r_10 {
	  margin-right: .10rem;
	}

	.mr_b_10 {
	  margin-bottom: .10rem;
	}

	.mr_t_20 {
	  margin-top: .20rem;
	}

	.pd_t_25 {
	  padding-top: .25rem;
	}

	.pd_t_10 {
	  padding-top: .10rem;
	}

	.pd_b_25 {
	  padding-bottom: .25rem;
	}

	.pd_b_10 {
	  padding-bottom: .10rem;
	}

	.rec_info {
	  min-height: 1.50rem;
	  margin: .20rem 0;
	  background: #fff;
	}

	.rec_item {
	  margin: 0 .30rem;
		display: flex;
	}

	.rec_title, .rec_name, .rec_phone, .rec_addr {
	  font-size: .28rem;
	  color: #666;
	}

	.shop {
		margin: .10rem 0;
	}
	.shop_item {
	  background: #fff;
	}

	.shop_item {
	  display: flex;
	  height: 1.82rem;
	  align-items: center;
	  border-bottom: 1px solid #eee;
	  padding: 0 .30rem;
	}

	.part_left {
	  height: 1.20rem;
	  width: 1.20rem;
	  border-radius: .10rem;
	  margin-right: .20rem;
	}

	.part_center {
	  flex: auto;
	}

	.shop_title {
	  font-size: .28rem;
	  color: #666;
	}

	.up_price {
	  font-size: .28rem;
	  color: #ff502d;
	}

	.shop_color, .up_num {
	  font-size: .24rem;
	  color: #999;
	}

	.part_right {
	  text-align: right;
	}

	.bar_item {
	  display: flex;
	  height: .64rem;
	  align-items: center;
	  background: #fff;
	  padding: 0 .30rem;
	}

	.bar_m_item {
	  height: 1.33rem;
	  background: #fff;
	  padding: 0 .30rem;
	}

	.bar_m_box {
	  position: relative;
	  height: 1.33rem;
	  border-bottom: 1px solid #eee;
	}

	.bar_item_top {
	  display: flex;
	  padding-bottom: .12rem;
	  padding-top: .30rem;
	}

	.bar_item_bottom {
	  text-align: right;
	  font-size: .24rem;
	  color: #999;
	  line-height: .24rem;
	}

	.bar_title {
	  flex: auto;
	  font-size: .28rem;
	  color: #333;
	}

	.bar_content {
	  font-size: .28rem;
	  color: #666;
	}

	.bar_content2 {
	  font-size: .28rem;
	  color: #ff502d;
	}

	.kefu {
	  height: 1.00rem;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #fff;
	  margin: .20rem 0;
	  border-radius: 0;
	  border: none !important;
	}
	.kefu::after { display: none; }

	.kefu_icon {
	  font-size: .34rem;
	  margin-right: .25rem;
	  color: #999;
	}

	.kf_title {
	  font-size: .30rem;
	  color: #666;
	}

	.order_detail {
	  background: #fff;
	  padding-left: .30rem;
	}

	.order_title {
	  height: .40rem;
	  line-height: .40rem;
	  font-size: .34rem;
	  color: #333;
	  font-weight: 800;
	  padding: .30rem 0;
	}

	.order_item {
	  line-height: .24rem;
	  padding-bottom: .30rem;
	}

	.order_num, .create_time, .yufu_time, .pay_type {
	  font-size: .24rem;
	  color: #999;
	}


	.yonghuxinxi-biaoti{
	  padding-top: .30rem;
	  padding-left: .30rem;
	  font-size: .34rem;
	  color: #333333;
	  font-weight: 700;
	}
	.dingdanxinxi{
	  margin-top: .20rem;
	  background: #FFFFFF;
	}
	.dingdanxinxi-texts{
	  padding: .10rem .30rem;
	  font-size: .24rem;
	  color: #999999;
	}
	.dingdanxinxi-text{
	  padding: .10rem 0;
	  border: 0px solid #f00;
	}
	.express_num {
	  margin-bottom: .5em;
	}
	.express_list {
	  position: relative;
	  padding: .20rem 0 .20rem .80rem;
	}
	.express_list:before {
	  position: absolute;
	  top: .22rem;
	  left: .20rem;
	  display: block;
	  width: .22rem;
	  height: .22rem;
	  border-radius: 50%;
	  content: "";
	  background: #eee;
	}
	.express_list.ex_num_0:before {
	  background: #E85A5A;
	}
	.express_list .time {
	  font: .28rem/1em "";
	  color: #999;
	}
	.express_list .text {
	  margin-top: .5em;
	  font: .28rem/1.5em "";
	  color: #666;
	}

	.coupon {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: .20rem;
		padding: .30rem;
		background: #fff;
	}
	.coupon .name {
		font: .28rem/1em "";
		color: #333;
	}
	.coupon .value {
		font: .28rem/1em "";
		color: #666;
	}

	/* 底部 */

	.footer {
	  height: 1.00rem;
	  width: 100%;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  background: #fff;
	  border-top: 1px solid #eee;
	}

	.payment {
	  margin: .25rem .54rem;
	  border: 0px solid #f00;
		display: flex;
	}

	.pay_title {
	  font-size: .28rem;
	  color: #999;
	  margin-right: .10rem;
	}

	.pay_price {
	  font-size: .34rem;
	  color: #ff502d;
	}

	.pay_right {
	  margin-right: .30rem;
	}

	.pay_btn {
	  position: absolute;
	  top: .10rem;
	  right: .30rem;
	  width: 3.00rem;
	  height: .80rem;
	  line-height: .76rem;
	  font-size: .34rem;
	  color: #fff;
	  background: #ff502d;
	  border-radius: .40rem;
		display: flex;
		justify-content: center;
	}

	.pay_btn_active {
	  color: rgba(255, 255, 255, 0.6);
	  opacity: 0.8;
	}

	.btn_confirm {
	  margin: .10rem .30rem;
	  height: .80rem;
	  line-height: .80rem;
	  font-size: .34rem;
	  color: #fff;
	  background: #ff502d;
	  border-radius: .40rem;
		display: flex;
		justify-content: center;
	}

	</style>
</head>
<body>
	<div class="content app" v-cloak>

<!-- 头部 -->
<div class="header1">
<div class="hd_t">{{state_text}}</div>
<div class="hd_b">{{state_tips}}</div>
</div>

<!-- 内容区 -->
<div class="wrap">
<!-- 收件人信息 -->
<div class="rec_info">
	<div class="rec_item pd_t_25 pd_b_10">
		<div class="rec_title mr_r_40">收件人：</div>
		<div class="rec_name mr_r_40">{{order.express_receive_name}}</div>
		<div class="rec_phone">{{order.express_phone}}</div>
	</div>
	<div class="rec_item  pd_b_25">
		<div class="rec_title mr_r_10">收货地址：</div>
		<div class="rec_addr">{{order.express_address}}</div>
	</div>
</div>
<!-- 商品信息 -->
<div class="shop" v-for="(item,index) in products" :key="index">
	<div class="shop_item">
		<image class="part_left" :src="item.image_center+'?imagediv2/1/w/150/h/150'"></image>
		<div class="part_center">
			<div class="shop_title mr_b_10">{{item.product_name}}</div>
			<div class="shop_color">{{item.sku_text}}</div>
		</div>
		<div class="part_right">
			<div class="up_price mr_b_10">¥{{item.unit_price}}</div>
			<div class="up_num">×{{item.nums}}</div>
		</div>
	</div>
	<div class="bar">
		<div class="bar_item">
			<div class="bar_title">商品总价</div>
			<div class="bar_content">¥{{item.price}}</div>
		</div>
		<div class="bar_item">
			<div class="bar_title">运费</div>
			<div class="bar_content">¥{{item.real_fee}}</div>
		</div>
		<div class="bar_item" v-if="type==2">
			<div class="bar_title">预付款</div>
			<div class="bar_content2">¥{{order.earnest_charge_money}}</div>
		</div>
		<div class="bar_m_item mr_t_20" v-if="type==2">
			<div class="bar_m_box">
				<div class="bar_item_top">
					<div class="bar_title">尾款金额</div>
					<div class="bar_content2">¥{{order.tail_charge_money}}</div>
				</div>
				<div class="bar_item_bottom">{{order.products_tail_pay_time}} 开始支付尾款</div>
			</div>
		</div>
		<div class="bar_item" style="height:.82rem" v-if="type==2">
			<div class="bar_title">尾款通知手机号</div>
			<div class="bar_content">{{order.tail_notice_phone}}</div>
		</div>
	</div>
</div>

<div class="coupon" v-if="order.coupon_amount">
	<div class="name">优惠券</div>
	<div class="value">-￥{{order.coupon_amount}}</div>
</div>

<!-- 客服 -->
<!-- <div class="kefu" open-type="contact" session-from="order">
	<div class="iconfont iconpingjia- kefu_icon"></div>
	<div class="kf_title">在线客服</div>
</div> -->

<!-- 订单信息 -->
<div class="order_detail">
	<div class="order_title">订单信息</div>
	<div class="order_item">
		<div class="order_num">订单编号: {{id}}</div>
	</div>
	<div class="order_item">
		<div class="create_time">创建时间: {{order.createtime}}</div>
	</div>
	<div class="order_item" v-if="order.pay_time">
		<div class="yufu_time">支付时间: {{order.pay_time}}</div>
	</div>
	<div class="order_item" v-if="order.pay_time">
		<div class="pay_type">付款方式: 微信支付</div>
	</div>
</div>

<!-- 快递信息 -->
<div v-if="order.express && order.express.content" class="dingdanxinxi">
	<div class="yonghuxinxi-biaoti">快递信息</div>
	<div class="dingdanxinxi-texts">
		<div class="express_num dingdanxinxi-text">快递运号: {{order.express.express_no || ''}}</div>
		<div :class=" 'express_list ex_num_'+index" v-for="(item,index) in order.express.content" :key="index" v-if="order.express">
			<div class="time">{{item.time}}:</div>
			<div class="text">{{item.content}}</div>
		</div>
	</div>
</div>

</div>

<!-- 底部 -->
<div class="footer" v-if="state==0||state==1&&type==2&&order.is_presale_state==2||state==2">
<div class="payment" v-if="state==0||state==1&&type==2&&order.is_presale_state==2">
	<div class="pay_title">待支付：</div>
	<div class="pay_price">¥{{pay}}</div>
	<div class="pay_btn" @click="Pay">去付款</div>
</div>
<!-- <div v-if="{{state==1}}">
	<button class="btn_confirm" bindtap="MoneyBack">申请退款</button>
</div> -->
<div v-if="state==2">
	<div class="btn_confirm" @click="Confirm(id)">确认收货</div>
</div>
</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			id: api.pageParam.id,
	    type: "",
	    state: 99,
	    state_text: "",
			state_tip: "",
			order: {},
	    products: [],
	    pay: 0,
			state_tips:'',
			state_text:''
		},
		mounted: function(){
		 api.addEventListener({
		    name: 'viewappear'
			}, function(ret, err) {
					vm.getData()
			});
		},
		methods: {
			     //获取数据
						getData: function (loader){
							let param = {
									order_id: this.id
							}
							AjaxSafe({
						   		url:"/xapp/order/detail",
						    	data:param,
						    	loader:loader,
								success: function(ret) {
									 let order = ret.data || {};
									 order.express = order.express || {};
									 if(order.express && order.express.content )
									 {
										 order.express.content = JSON.parse(order.express.content);
									 }

										 vm.order = order,
										 vm.products = order.detail
										 vm.type = order.type
										 vm.state = order.state
										 vm.pay = order.type == 1 ? order.total_amount : (order.is_presale_state == 1 ? order.earnest_charge_money : order.tail_charge_money+order.express_amount)

									   vm.StateProc();	// 状态处理
								},
								failed: function(err){
										alert("网络故障！");
								}
							});
						},
						// 状态处理
						StateProc(){
					    let text,tips;
					    switch (this.state)
					    {
					      case 0:
					        text = "待支付";
					        if (this.type == 1)
					          tips = "订单暂未支付，请先支付";
					        else
										tips = "订单未支付预付款，请先支付";
					        break;
					      case 1:
					        text = "待发货";
									if (this.order.is_presale_state == 2)
										tips = "订单已支付预付款，等待支付尾款";
									else
					        	tips = "正在准备商品，请耐心等待";
					        break;
					      case 2:
					        text = "已发货";
					        tips = "商品正在路上，请耐心等待";
					        break;
					      case 3:
					        text = "已完成";
					        tips = "订单已完成";
					        break;
					      case 5:
					        text = "已关闭";
					        tips = "订单已关闭";
					        break;
					      case 6:
					        if (this.order.refund_status == 2) {
					          text = "退款中";
					          tips = "订单正在办理退款，请耐心等待";
					        }
					        else if (this.order.refund_status == 4) {
					          text = "退款申请被拒绝";
					          tips = this.order.refund_reason ||"抱歉，您的退款申请被拒绝";
					        }
					        else if (this.order.refund_status == 5) {
					          text = "退款已完成";
					          tips = "退款完成，订单已关闭";
					        }
					        break;
					    }

					      this.state_text = text
					      this.state_tips = tips

						},
						// 申请退款
						MoneyBack: function (id) {
							hhPanel.confirm({
									title: "申请退款",
									content: "确定要申请退款吗？",
									btns: ["取消","确定"]
							},function(){
								let param = {
										order_id: id
								}
								AjaxSafe({
										url:"/xapp/product/order/reimburse",
										data:param,
										loader:true,
									success: function(res) {
											 if (res.state) vm.getData()
											 api.toast({msg: res.msg,duration: 2000,location: 'middle'});
									},
									failed: function(err){
											alert("网络故障！");
									}
								});
							});
						},
						// 确认收货
						Confirm: function (evt) {
							hhPanel.confirm({
									title: "收货确认",
									content: "确认收货后，此订单将结束，是否继续？",
									btns: ["取消","确定"]
							},function(){
								let param = {
										order_id: id
								}
								AjaxSafe({
										url:"/xapp/order/finish",
										data:param,
										loader:true,
									success: function(res) {
											 if (res.state) vm.getData()
											 api.toast({msg: res.msg,duration: 2000,location: 'middle'});
									},
									failed: function(err){
											alert("网络故障！");
									}
								});
							});
						},
						Pay(){
						    let url = "";
						    if( this.type==1)
						      url = "/xapp/order/buy/againPay";
						    else
						      url = this.order.is_presale_state == 1 ? "/xapp/order/buy/advanceAgainPay" : "/xapp/order/buy/payTail";
									let param = {
											order_id: this.id
									}
									AjaxSafe({
								   		url:url,
								    	data:param,
								    	loader:true,
										success: function(res) {
										    if (res.state) {
										        vm.WxPay(res);
										    } else {
										    	api.toast({msg: res.msg,duration: 2000,location: 'middle'});
										    }
										},
										failed: function(err){
												alert("网络故障！");
										}
									});
								},
						  // 调用微信支付
						  WxPay(ret) {
								hhWeixin.pay({
									tradeNo: ret.data.trade_no,
									detail: ret.data.detail,
									description: ret.data.description,
									totalFee: ret.data.total_fee,
									notifyUrl: ret.data.notify_url
								},function(res){
										order_pay_success(vm.id,true)
								});
						  },





		},

	});
}

</script>
</html>
